<template>
  <view class="page">
    <view class="topCard">
      <view class="title">
        <text class="projectTitle">{{ projectInfo?.title }}</text>
      </view>
      <view class="publishStatus">
        <view>发布时间: {{ formatISODate(projectInfo?.start_time ?? '0') }}</view>
        <view>截止时间: {{ formatISODate(projectInfo?.over_time ?? '0') }}</view>
      </view>
      <view class="divider">
        <up-divider line-color="#c1c1c1"></up-divider>
      </view>
      <view class="content">
        <view class="u-content">
          <up-parse :content="content"></up-parse>
        </view>
      </view>
    </view>
    <view class="signUpBox">
      <view class="signUpBoxTop">
        <view>已通过:&nbsp;&nbsp;({{ enrollNum }}/{{ projectInfo?.people_num }})</view>
        <view style="display: flex; align-items: baseline" @click="handleToRegisterList">
          <view style="margin-right: 3px">
            <text>查看全部报名列表 </text>
          </view>
          <up-icon name="arrow-right" size="16" color="#b4b5b7"></up-icon>
        </view>
      </view>
      <view style="margin-top: 10px; width: 95%">
        <up-line-progress :percentage="percentage" style="width: 100%" height="18px" :show-text="false" />
      </view>
      <view class="avatarList">
        <up-avatar-group :urls="urls" size="35" gap="0.3"></up-avatar-group>
      </view>
    </view>

    <view class="bottomCard" :style="{ marginBottom: 120 + bottomSafeAreaHeight + 'rpx' }">
      <view class="bottomCardTop">
        <view class="bottomCardTopLeftAvatar">
          <up-avatar size="50" :src="avatar"></up-avatar>
        </view>
        <view class="bottomCardTopLeftText"> {{ projectInfo?.adminInfo.name }} </view>
      </view>

      <view class="bottomCardBottom">
        <view class="bottomCardBottomButton">
          <view class="bottomCardBottomLeftItemIcon">
            <up-icon name="qq-fill" color="#2bae73" size="28"></up-icon>
          </view>
          <view class="bottomCardBottomLeftItemText" @click="showWx = true">联系QQ</view>
        </view>
        <view class="bottomCardBottomButton">
          <view class="bottomCardBottomLeftItemIcon">
            <up-icon name="phone-fill" color="#ffa915" size="28"></up-icon>
          </view>
          <view class="bottomCardBottomLeftItemText" @click="showPhone = true">拨打电话</view>
        </view>
      </view>
      <up-modal
:show="showWx" :title="titleWx" :content="contentqq" content-text-align="center"
        @confirm="confirmWx"></up-modal>
      <up-modal
:show="showPhone" :title="titlePhone" :content="contentPhone" content-text-align="center"
        @confirm="confirmPhone"></up-modal>
    </view>

    <view class="tabBar">
      <up-tabbar
:value="value6" :fixed="true" :placeholder="false" :safe-area-inset-bottom="true"
        @change="(name: any) => (value6 = name)">
        <up-tabbar-item text="首页" icon="home" @click="goHome"></up-tabbar-item>
        <up-tabbar-item text="分享" icon="share"></up-tabbar-item>
        <up-tabbar-item text="我要报名" icon="play-right" @click="handleAddForm"></up-tabbar-item>
      </up-tabbar>
      <view :style="{ paddingBottom: bottomSafeAreaHeight + 'rpx' }"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getEnrollInfo, getProjectDetail } from '@/api/projectInfo'
import router from '@/router'
import { InfoData } from '@/types/projectInfo'
import { useRoute } from 'uniapp-router-next'
import { ref, reactive, onMounted } from 'vue'
import { formatISODate } from '@/utils/date'
import { useUserStore } from '@/stores/index'
import { enroll } from '@/api/projectInfo'
const userStore = useUserStore()
const route = useRoute()

// 报名
const handleAddForm = async () => {
  if (!userStore.token) {
    uni.showModal({
      title: '请先登录',
      content: '是否跳转到登录页',
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          router.redirectTo({
            path: '/pages/loginPage/index',
          })
        }
      },
    })
    return
  } else {
    if (userStore.userInfo?.sex === null || !userStore.userInfo?.faculty || !userStore.userInfo?.introduction) {
      uni.showModal({
        title: '请先完善个人信息',
        content: '是否跳转到个人信息页',
        showCancel: true,
        success: ({ confirm }) => {
          if (confirm) {
            router.redirectTo({
              path: '/pages/myInfoPage/index',
            })
          }
        },
      })
    } else {
      await enroll(projectId.value)
      uni.showModal({
        title: '提示',
        content: '报名成功',
        showCancel: true,
        
      })
      
    }
  }

}

const goHome = () => {
  router.switchTab({
    path: '/pages/homePage/index',
  })
}
// 使用 ref 创建响应式数据
const showWx = ref(false)
const titleWx = ref('QQ账号/群')
const contentqq = ref()
const confirmWx = () => {
  showWx.value = false
}

const showPhone = ref(false)
const titlePhone = ref('电话号码')
const contentPhone = ref()
const confirmPhone = () => {
  showPhone.value = false
}
const value6 = ref('home')

// 需要人数
const needNum = ref(0)

// 已通过人数
const enrollNum = ref(0)

// 百分比
const percentage = ref((enrollNum.value / needNum.value) * 100)

// 控制进度条
// const computedWidth = (type) => {
//   if (type === 'plus') {
//     percentage.value = uni.$u.range(0, 100, percentage.value + 10)
//   } else {
//     percentage.value = uni.$u.range(0, 100, percentage.value - 10)
//   }
// }

// 头像列表
const urls = reactive<any>([])

// 老师头像
const avatar = ref('../../static/defaultAvatar.png')
// 内容
const content = ref()

// 报名列表
const listRes = ref()

// 查看全部跳转
const handleToRegisterList = () => {
  uni.navigateTo({
    url: '/pages/registerList/index',
    query: {
      listRes: listRes.value,
    },
  })
}

// 保存传递的id参数
const projectId = ref()
// 项目完整信息
const projectInfo = ref<InfoData>()

onMounted(async () => {
  // 获取路由传递的参数
  projectId.value = route.query.project_id
  const res = await getProjectDetail(projectId.value)
  projectInfo.value = res.data
  // 在这里根据 projectId 执行其他逻辑
  contentPhone.value = projectInfo.value.adminInfo.phone_num ?? '暂无'
  contentqq.value = projectInfo.value.adminInfo.qq ?? '暂无'
  content.value = projectInfo.value.info ?? '暂无'
  avatar.value = projectInfo.value.adminInfo.avatar ?? '../../static/defaultAvatar.png'
  needNum.value = projectInfo.value.people_num

  // 获取报名列表
  listRes.value = await getEnrollInfo(projectId.value)
  // 获取通过报名人数

  listRes.value.data.list.forEach((item: any) => {
    if (item?.status == 1) {
      urls.push(item?.userDetail.avatar ?? '../../static/defaultAvatar.png')
      enrollNum.value = enrollNum.value + 1
    }
  })
})

const systemInfo = uni.getSystemInfoSync()
const bottomSafeAreaHeight = systemInfo.screenHeight - systemInfo.safeArea?.bottom
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #eff0f4;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topCard {
  width: 95%;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 15px;
  border-radius: 8px;
}

.title {
  width: 95%;
  margin-top: 10px;
  text-align: center;
}

.projectTitle {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.divider {
  width: 95%;
  height: 30px;
}

.publishStatus {
  width: 95%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

.signUpBox {
  width: 95%;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 8px;
}

.signUpBoxTop {
  width: 95%;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

.avatarList {
  width: 95%;
  background-color: #fff;
  display: flex;
  align-items: start;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
}

.u-content {
  padding: 24px;
}

.bottomCard {
  width: 95%;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  border-radius: 8px;
}

.bottomCardTop {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  font-size: 18px;
  color: #0c0c0c;
  margin-top: 15px;
  align-items: center;
}

.bottomCardTopLeftText {
  margin-left: 25px;
  text-align: center;
  font-weight: bold;
}

.bottomCardBottom {
  width: 80%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottomCardBottomText {
  font-size: 8px;
  color: #666;
}

.bottomCardBottomButton {
  width: 45%;
  height: 50px;
  background-color: #fff;
  border-radius: 24px;
  border: 1px solid #666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: black;
}

:deep(.u-tabbar--fixed) {
  position: static !important;
}

.tabBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 1;
}
</style>
